<template>
  <ElDialog v-model="dialogVisible" :title="title" width="400" :before-close="handleClose">
    <div class="searchTable">
      <ElForm ref="ruleFormRef" :model="ruleForm" :rules="rules" class="search-color" label-width="120px">
        <ElRow>
          <ElCol :span="24">
            <ElFormItem label="启用算法：" prop="state">
              <ElRadioGroup v-model="ruleForm.state">
                <ElRadio :value="1">启用</ElRadio>
                <ElRadio :value="0">不启用</ElRadio>
              </ElRadioGroup>
            </ElFormItem>
          </ElCol>
          <template v-if="type == 1">
            <ElCol :span="24">
              <ElFormItem label="间隔距离：" prop="personDistance">
                <section style="display: flex; align-items: center">
                  <ElInput class="input-bg" v-model.number="ruleForm.personDistance" placeholder="请输入" />米
                </section>
              </ElFormItem>
            </ElCol>
            <ElCol :span="24">
              <ElFormItem label="人数阈值：" prop="maxPerson">
                <section style="display: flex; align-items: center">
                  <ElInput class="input-bg" v-model.number="ruleForm.maxPerson" placeholder="请输入" />人
                </section>
              </ElFormItem>
            </ElCol>
          </template>
          <template v-else-if="type == 9">
            <ElCol :span="24">
              <ElFormItem label="识别精度阈值:" prop="maxIdentifyAccuracy">
                <section style="display: flex; align-items: center">
                  <ElInput class="input-bg" v-model.number="ruleForm.maxIdentifyAccuracy" placeholder="请输入" />%
                </section>
              </ElFormItem>
            </ElCol>
            <ElCol :span="24">
              <ElFormItem label="人像照片:" prop="faceImageUrl">
                <Upload v-model:imgUrl="ruleForm.faceImageUrl" :isShowTip="isShowTip" :disabled="disabled"
                  :accept="acceptImg" @updateImg="updateImg" />
              </ElFormItem>
            </ElCol>
          </template>
          <template v-else>
            <ElCol :span="24">
              <ElFormItem label="流量阈值：" prop="maxFlow">
                <section style="display: flex; align-items: center">
                  <ElInput class="input-bg" v-model.number="ruleForm.maxFlow" placeholder="请输入" />人
                </section>
              </ElFormItem>
            </ElCol>
            <ElCol :span="24">
              <ElFormItem label="密度阈值：" prop="density">
                <section style="display: flex; align-items: center">
                  <ElInput style="width: 70%" class="input-bg" v-model.number="ruleForm.density" placeholder="请输入" />
                  人/平方米
                </section>
              </ElFormItem>
            </ElCol>
          </template>
        </ElRow>
      </ElForm>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <ElButton class="b-r-4" @click="resetForm(ruleFormRef)">取消</ElButton>
        <ElButton class="b-r-4" type="primary" @click="submitForm(ruleFormRef)">
          确定
        </ElButton>
      </div>
    </template>
  </ElDialog>
</template>
<script setup>
import {
  ElDialog,
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElMessage,
  ElRow,
  ElCol,
  ElRadioGroup,
  ElRadio,
  ElUpload,
  ElIcon,
} from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import { reactive, ref } from 'vue';
import { router } from '#/router';
import Upload from '#/adapter/component/Upload/Upload.vue';
const disabled = ref(false);
const acceptImg = ref('.jpg,.jpeg,.png');
const isShowTip = reactive({
  isShow: true,
  message: '支持JPG/PNG格式，大小不超过5MB',
});
const emit = defineEmits(['algoSetting']);
const dialogVisible = ref(false);
const title = ref('');
const type = ref(1); //人员
const ruleFormRef = ref();
const ruleForm = reactive({
  algorithmId: '',
  state: 0,
  personDistance: 0,
  maxPerson: 0,
  maxIdentifyAccuracy: 0,
  faceImageUrl: '',
  maxFlow: 0,
  density: 0,
});

const rules = reactive({
  algorithm: [
    { required: true, message: '请选择是否启用算法', trigger: 'change' },
  ],
});

const addDialog = (obj) => {
  type.value = obj.value;
  dialogVisible.value = true;
  ruleForm.algorithmId = obj.value;
  title.value = obj.label + '算法配置';
};

const editDialog = (obj, arr) => {
  dialogVisible.value = true;
  title.value = obj.label + '算法配置';
  ruleForm.algorithmId = obj.value;
  type.value = obj.value;
  arr.forEach((el) => {
    if (el.algorithmId == obj.value) {
      ruleForm.state = el.state;
      if (el.algorithmId == 1) {
        ruleForm.personDistance = el.personDistance;
        ruleForm.maxPerson = el.maxPerson;
      }
      if (el.algorithmId == 9) {
        ruleForm.maxIdentifyAccuracy = el.maxIdentifyAccuracy;
        ruleForm.faceImageUrl = el.faceImageUrl;
      }
      if (el.algorithmId == 22) {
        ruleForm.maxFlow = el.maxFlow;
        ruleForm.density = el.density;
      }
    }
  });
};

defineExpose({ addDialog, editDialog });

const updateImg = (img) => {
  ruleForm.faceImageUrl = img;
};

const resetForm = () => {
  ruleFormRef.value.resetFields();
  dialogVisible.value = false;
};

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 添加成功
      ElMessage({
        plain: true,
        message: '添加成功',
        type: 'success',
      });
      emit('algoSetting', ruleForm);
      handleClose();
    } else {
      console.log('error submit!', fields);
    }
  });
};

const handleClose = () => {
  dialogVisible.value = false;
};
</script>
<style scope lang="scss">
.input-bg .el-input__wrapper {
  height: 30px !important;
  line-height: 30px !important;
  background: none !important;
  box-shadow: 0 0 0 1px #e4e4e7 !important;
}

.avatar-uploader {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 178px;
  height: 178px;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}

.avatar-uploader:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  width: 178px;
  height: 178px;
  font-size: 28px;
  line-height: 178px;
  color: #8c939d;
  text-align: center;
}

.avatar {
  display: block;
  width: 178px;
  height: 178px;
}
</style>
